<template>
  <div id="charts5" ref="charts5" style="height: 400px;"></div>
</template>
<script>
  export default {
    mounted() {
      this.drawchart()
    },
    methods: {
      drawchart() {
        var data =
          [[['1997', 77, 17096869, '非小细胞肺癌', 1990], ['1998', 77.4, 27662440, '发病机制', 1990], ['1999', 68, 1154605773, '分子标志物', 1990], ['2000', 74.7, 10582082, '降钙素原', 1990], ['2001', 75, 4986705, '头孢哌酮', 1990], ['2002', 77.1, 56943299, '抑制肿瘤细胞增殖', 1990], ['2003', 75.4, 78958237, '单抗', 1990], ['2004', 78.1, 254830, '头孢哌酮', 1990], ['2005', 57.7, 870601776, '经支气管肺活检', 1990], ['2006', 79.1, 122249285, '分子标志物', 1990], ['2007', 67.9, 20194354, '经支气管肺活检', 1990], ['2008', 72, 42972254, '双胍类药物', 1990], ['2009', 75.4, 3397534, ' 降钙素原', 1990], ['2010', 76.8, 4240375, 'TZDs', 1990], ['2011', 70.8, 38195258, '细胞活性', 1990], ['2012', 69.6, 147568552, '非小细胞肺癌', 1990], ['2013', 67.3, 53994605, '分子标志物', 1990], ['2014', 75.7, 57110117, '头孢哌酮', 1990], ['2015', 75.4, 252847810, '细胞活性', 1990]], [['2016', 81.8, 23968973, '单抗', 2015], ['2017', 81.7, 35939927, '结核性', 2015], ['2018', 76.9, 1376048943, '头孢哌酮', 2015], ['2017', 78.5, 11389562, '发病机制', 2015], ['2001', 80.8, 5503457, '头孢哌酮', 2015], ['1997', 81.9, 64395345, '抑制肿瘤细胞增殖', 2015], ['2017', 81.1, 80688545, '分子标志物', 2015], ['2016', 82.8, 329425, '降钙素原', 2015], ['2017', 66.8, 1311050527, '头孢哌酮', 2015], ['2012', 83.5, 126573481, '尿常规', 2015], ['2001', 71.4, 25155317, '经支气管肺活检', 2015], ['2000', 80.7, 50293439, '单抗', 2015], ['2012', 80.6, 4528526, '结核性', 2015], ['2000', 81.6, 5210967, '发病机制', 2015], ['2016', 77.3, 38611794, '细胞活性', 2015], ['2017', 73.13, 143456918, '头孢哌酮', 2015], ['2001', 76.5, 78665830, '分子标志物', 2015], ['2015', 81.4, 64715810, '经支气管肺活检', 2015], ['2015', 79.1, 321773631, '单抗', 2015]]];

        var option = {
          backgroundColor: new this.$echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
            offset: 0,
            color: '#f7f8fa'
          }, {
            offset: 1,
            color: '#cdd0d5'
          }]),
          title: {
            text: ''
          },
          legend: {
            right: 10,
            data: ['GLP1', '是']
          },
          xAxis: {
            min:1995,
            max:2018,
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLabel : {
              formatter: '{value}年'
            },
          },
          yAxis: {
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            },
            scale: true
          },
          series: [{
            name: '1990',
            data: data[0],
            type: 'scatter',
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            label: {
              emphasis: {
                show: true,
                formatter: function (param) {
                  return param.data[3];
                },
                position: 'top'
              }
            },
            itemStyle: {
              normal: {
                shadowBlur: 10,
                shadowColor: 'rgba(120, 36, 50, 0.5)',
                shadowOffsetY: 5,
                color: new this.$echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                  offset: 0,
                  color: 'rgb(251, 118, 123)'
                }, {
                  offset: 1,
                  color: 'rgb(204, 46, 72)'
                }])
              }
            }
          }, {
            name: '2015',
            data: data[1],
            type: 'scatter',
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            label: {
              emphasis: {
                show: true,
                formatter: function (param) {
                  return param.data[3];
                },
                position: 'top'
              }
            },
            itemStyle: {
              normal: {
                shadowBlur: 10,
                shadowColor: 'rgba(25, 100, 150, 0.5)',
                shadowOffsetY: 5,
                color: new this.$echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                  offset: 0,
                  color: 'rgb(129, 227, 238)'
                }, {
                  offset: 1,
                  color: 'rgb(25, 183, 207)'
                }])
              }
            }
          }]
        };
        var mychart = this.$echarts.init(this.$refs.charts5)
        mychart.setOption(option)
      }
    }
  }
</script>
<style></style>
